<html>
    <head>
        <title>Product Category</title>
        <link type="text/css" rel="stylesheet" href="app://static/jquery/css/ui-lightness/jquery-ui.custom.css" />
        <link type="text/css" rel="stylesheet" href="app://static/jpager/css/jqpagination.css" />
        
        <script type="text/javascript" src="app://static/jquery/js/jquery.min.js"></script>
        <script type="text/javascript" src="app://static/jquery/js/jquery-ui.custom.min.js"></script>
        
        <!-- pager scripts -->
        <script type="text/javascript" src="app://static/jpager/jquery.jqpagination.min.js"></script>
        <script type="text/javascript" src="app://utils.js"></script>
        <script type="text/javascript" src="app://database.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function(){
                jQuery("#list4").jqGrid({
    datatype: "local",
    height: 250,
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:60, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date"},
        {name:'name',index:'name', width:100},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},     
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    multiselect: true,
    caption: "Manipulating Array Data"
});
var mydata = [
        {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
        ];
for(var i=0;i<=mydata.length;i++)
    jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]); 
            });
        </script>
    </head>
    <body style="padding: 6px;">
        <div id="product_nav">
            <ul style="list-style: none; padding: 3px;">
                <li><a href="app://modules/m_product.html" target="mainframe" id="product_list" >商品列表</a></li>
                <li><a href="javascript:void(0);" id="product_category" >商品分类</a></li>
                <li><a href="app://modules/m_product_putinwarehouse.html" target="mainframe" id="product_warehouse" >入库商品</a></li>
                <li><a href="app://modules/m_product_totalwarehouse.html" target="mainframe" id="product_count" >仓库盘点</a></li>
            </ul>
        </div>
        <h1>Product category</h1>
        <table id="list4"></table>
    </body>
</html>